<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">{{ $t('order.logisticsform.q8enxo') }}</text>
			</template>
		</cu-custom>
		<view>
			<form>
				<view class="cu-form-group">
					<view class="title text-darkgrey">{{ $t('order.logisticsform.74r8ns') }}</view>
					<input class="text-right" disabled name="orderNo" :value="form.orderNo" />
				</view>
				<view class="cu-form-group">
					<view class="title text-darkgrey">{{ $t('order.logisticsform.91n40y') }}</view>
					<input class="text-right" :placeholder="$t('order.logisticsform.4f29oe')" name="userName" disabled :value="form.recName" />
				</view>
				<view class="cu-form-group">
					<view class="title text-darkgrey">{{ $t('order.logisticsform.tavmtr') }}</view>
					<input class="text-right" :placeholder="$t('order.logisticsform.p541tf')" name="telNum" disabled :value="form.recTel" />
				</view>
				<view class="cu-form-group">
					<view class="title text-darkgrey">{{ $t('order.logisticsform.236d7t') }}</view>
					<textarea class="text-right" maxlength="-1" :placeholder="$t('order.logisticsform.92y48s')" name="address" disabled :value="form.recAddress"></textarea>
				</view>
				<!-- 发货类型 -->
				<view class="cu-form-group margin-tb-sm">
					<view class="title text-darkgrey">{{ $t('order.detail.32p2w9') }}</view>
					<picker @change="deliveryTypePickerChange" :value="deliveryTypeIndex" :range="deliveryTypeList" :range-key="'name'">
						<view class="picker text-black">
							{{ deliveryTypeList[deliveryTypeIndex].name }}
						</view>
					</picker>
				</view>
				<!-- 发物流 -->
				<view v-if="form.deliveryType == '1'">
					<!-- 快递选择 -->
					<view class="cu-form-group">
						<view class="title text-darkgrey">{{ $t('order.logisticsform.57c880') }}</view>
						<picker @change="pickerChange" :value="index" :range="orderlogistics" :range-key="'name'">
							<view class="picker text-black">
								{{ form.logisticsCode ? orderlogistics[index].name : $t('order.logisticsform.2ksl83') }}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title text-darkgrey">面单方式</view>
						<view class="flex">
							<view class="cu-btn sm radius" :class="form.labelWay == '1' ? 'bg-blue' : 'line-blue'" @click="changeLabelWay('1')">手动填写</view>
							<view class="cu-btn sm radius margin-left-xs" :class="form.labelWay == '2' ? 'bg-blue' : 'line-blue'" @click="changeLabelWay('2')">自动获取</view>
						</view>
					</view>
					<view v-if="form.labelWay == 1">
						<!-- 手动填写 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">{{ $t('order.logisticsform.p2qufd') }}</view>
							<input class="text-right" :placeholder="$t('order.logisticsform.p2qufd')" name="logisticsNo" v-model="form.logisticsNo" />
							<text class="cuIcon-scan text-grey" @click="scan('pad')"></text>
						</view>
					</view>
					<view v-if="form.labelWay == 2">
						<!-- 面单模板 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">面单模板</view>
							<picker @change="pickerChangelogisticsTemp" :value="indexlogisticsTemp" :range="orderlogisticsTemp" :range-key="'templateName'">
								<view class="picker text-black">
									{{ form.labelTemplateId ? orderlogisticsTemp[indexlogisticsTemp].templateName : '先选择快递公司' }}
								</view>
							</picker>
						</view>
						<!-- 月结账号 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">月结账户</view>
							<picker @change="pickerChangelogisticsAccount" :value="indexlogisticsAccount" :range="orderlogisticsAccount" :range-key="'accountId'">
								<view class="picker text-black">
									{{ form.shopLogisticsAccountId ? orderlogisticsAccount[indexlogisticsAccount].accountId : '先选择快递公司' }}
								</view>
							</picker>
						</view>
						<!-- 重量 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">重量(KG)</view>
							<input class="text-right" placeholder="输入重量" type="number" name="weight" v-model="form.weight" />
						</view>
						<!-- 发货人 -->
						<view class="cu-form-group margin-top-sm">
							<view class="title text-darkgrey">发货人</view>
							<input class="text-right" placeholder="输入发货人" name="weight" v-model="form.sendName" />
						</view>
						<!-- 发货人电话 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">发货人电话</view>
							<input class="text-right" placeholder="输入发货人电话" name="weight" v-model="form.sendTel" />
						</view>
						<!-- 发货人地址 -->
						<view class="cu-form-group">
							<view class="title text-darkgrey">发货人地址</view>
							<input class="text-right" placeholder="输入发货人地址" name="weight" v-model="form.sendAddress" />
						</view>
					</view>
				</view>
			</form>
			<view class="padding-xl flex flex-direction">
				<button class="cu-btn bg-blue round lg shadow-blur" :disabled="loading" @click="submit">{{ $t('order.logisticsform.tc3h47') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
import { getPage, getObj, addObj, putObj, delObj, editPrice, orderCancel, takeGoods, delivery } from '@/api/mall/orderinfo';
import { getLogisticsCompany } from '@/api/mall/configlogistics';
import { getObj as getObjSupplier } from '@/api/mall/supplier';
import { getObj as getObjShop } from '@/api/mall/shopinfo';
import permision from '@/public/app-plus/permission.js';
import service from '@/store/service';
export default {
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			id: null,
			orderInfo: {},
			orderlogistics: [], //快递公司
			orderlogisticsTemp: [], //快递公司面单模板
			orderlogisticsAccount: [], //快递公司 月结账号
			deliveryTypeIndex: 0,
			deliveryTypeList: [
				{
					index: '1',
					name: this.$t('order.detail.88055j')
				},
				{
					index: '2',
					name: this.$t('order.detail.6u9g5d')
				},
				{
					index: '3',
					name: this.$t('order.detail.4m81t0')
				}
			], //发货类型
			form: {
				// logistics: null,
				// logisticsNo: '',
				// labelTemplateId: '', //面单模板Id
				// labelWay: '1',
				// deliveryType: '1',
				// recName: '',
				// recAddress: '',
				// recTel: '',
				// orderLogistics: {
				// 	logisticsNo: '',
				// 	logistics: ''
				// },
				id: '',
				labelTemplateId: '', //面单模板Id
				recAddress: '',
				recName: '',
				recTel: '',
				sendName: '',
				sendTel: '',
				sendAddress: '',
				orderItemIds: [],
				shopId: '',
				deliveryType: '1',
				labelWay: '1',
				logisticsCode: '',
				logisticsNo: '',
				address: '',
				weight: 0
			},
			loading: false,
			index: 0,
			indexlogisticsTemp: 0, //面单模板
			indexlogisticsAccount: 0, //月结账号
			showDeliveryType: false, //发货类型 1发物流，2商家配送，3虚拟发货
			userInfo: {}
		};
	},
	onLoad(e) {
		this.userInfo = service.getUser();
		if (e) {
			this.id = e.id;
			// 订单信息
			this.getData();
			// 快递公司数据
			this.getOrderlogistics();
		}
	},
	methods: {
		// 提交
		submit() {
			if (this.form.deliveryType == '1') {
				if (this.form.labelWay == '2') {
					// 自动获取面单
					// 判断
					if (!this.form.logisticsCode) {
						uni.showToast({
							icon: 'none',
							title: '请选择' + this.$t('order.logisticsform.57c880')
						});
						return;
					}
					if (!this.form.labelTemplateId) {
						uni.showToast({
							icon: 'none',
							title: '请选择面单模板'
						});
						return;
					}
					if (!this.form.shopLogisticsAccountId) {
						uni.showToast({
							icon: 'none',
							title: '请选择月结账号'
						});
						return;
					}
					if (!this.form.weight) {
						uni.showToast({
							icon: 'none',
							title: '请输入快递重量'
						});
						return;
					}
				} else {
					if (!this.validate()) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: this.$t('order.logisticsform.149u10')
						// });
						return;
					}
				}
			}
			this.loading = true;
			let that = this;
			uni.showModal({
				title: this.$t('bargain.bargaininfo.b8740a'),
				content: this.$t('order.logisticsform.k130e7'),
				success: (res) => {
					if (res.confirm) {
						uni.showLoading();
						//不发物流的去掉已填的物流信息
						if (that.form.deliveryType != '1') {
							that.form.logisticsNo = '';
							that.form.logisticsCode = '';
							that.form.labelTemplateId = '';
							that.form.shopLogisticsAccountId = '';
							that.form.weight = 0;
						}
						// that.form.status = '2';
						delivery(that.form)
							.then((response) => {
								this.loading = false;
								uni.hideLoading();
								if (response.ok) {
									uni.showToast({
										title: this.$t('order.logisticsform.34793l')
									});
									uni.navigateBack({});
								}
							})
							.catch((e) => {
								this.loading = false;
								uni.hideLoading();
							});
					} else {
						this.loading = false;
					}
				}
			});
		},
		validate() {
			//验证
			let validate = true;
			let names = [
				{
					key: 'logisticsCode',
					label: this.$t('order.logisticsform.57c880')
				},
				{
					key: 'logisticsNo',
					label: this.$t('order.logisticsform.p2qufd')
				}
			];
			names.map((item) => {
				if (!this.form[item.key] && validate) {
					validate = false;
					uni.showToast({
						icon: 'none',
						title: item.label + this.$t('order.logisticsform.qw7448')
					});
					return;
				}
			});
			return validate;
		},
		// 切换发货方式
		deliveryTypePickerChange(value) {
			if (value) {
				this.deliveryTypeIndex = value.detail.value;
				this.form.deliveryType = this.deliveryTypeList[this.deliveryTypeIndex].index;
			}
		},
		// 快递公司列表
		getOrderlogistics() {
			api.mall.orderlogistics().then((response) => {
				if (response.data) {
					this.orderlogistics = response.data;
				}
			});
		},
		// 切换快递公司
		pickerChange(value) {
			if (value) {
				this.index = value.detail.value;
				this.form.logisticsCode = this.orderlogistics[value.detail.value].code;
			}
			if (this.form.logisticsCode) {
				this.orderlogisticsTemp = this.orderlogistics[this.index].labelTemplates;
				this.getShopLogisticsAccount();
			}
		},
		// 切换面单方式
		changeLabelWay(val) {
			this.form.labelWay = val;
			if (val == 1) {
			} else if (val == 2) {
				// 自动获取电子面单 - 获取月结账号
				if (this.form.logisticsCode) {
					this.orderlogisticsTemp = this.orderlogistics[this.index].labelTemplates;
					this.getShopLogisticsAccount();
				}
			}
		},
		// 切换面单模板选择
		pickerChangelogisticsTemp(value) {
			if (value) {
				this.indexlogisticsTemp = value.detail.value;
				this.form.labelTemplateId = this.orderlogisticsTemp[this.indexlogisticsTemp].templateId;
			}
		},
		// 切换 月结账号 选择
		pickerChangelogisticsAccount(value) {
			if (value) {
				this.indexlogisticsAccount = value.detail.value;
				this.form.shopLogisticsAccountId = this.orderlogisticsAccount[value.detail.value].id;
			}
		},
		// 月结账号
		getShopLogisticsAccount() {
			//  /mall/shoplogisticsaccount/list?shopId={{shopId}}&logisticsCode={{logisticsCode}}
			if ((this.orderInfo.shopId, this.form.logisticsCode))
				api.mall.shoplogisticsaccount(this.orderInfo.shopId, this.form.logisticsCode).then((response) => {
					this.orderlogisticsAccount = response.data || [];
				});
		},
		// 获取订单数据
		getData() {
			getObj(this.id).then((response) => {
				if (response.data) {
					this.orderInfo = response.data;
					this.form.orderId = response.data.id;
					this.form.orderNo = response.data.orderNo;
					this.form.recAddress = response.data.recAddress;
					this.form.recTel = response.data.recTel;
					this.form.recName = response.data.recName;
					this.form.shopId = response.data.shopId;
					this.form.deliveryType = response.data.deliveryType ? response.data.deliveryType : '1';
					this.form.deliveryType = response.data.deliveryType ? response.data.deliveryType : '1';
					this.form.orderItemIds = response.data.listOrderItem.map((item) => item.id).join(','); //发货的商品订单子项Id
					this.getLogisticsSenderInfo(response.data.shopId).then((res) => {
						this.form.sendName = res.name;
						this.form.sendTel = res.phone;
						this.form.sendAddress = res.address;
					});

				}
			});
		},

		// 否则获取发货信息(如果是供应商登录的则自动获取供应商的资料信息)
		getLogisticsSenderInfo(shopId) {
			return new Promise((resolve) => {
				if (this.userInfo.type == '3' && this.userInfo.supplierId) {
					getObjSupplier(this.userInfo.supplierId).then((response) => {
						resolve(response.data);
					});
				} else {
					getObjShop(shopId).then((response) => {
						resolve(response.data);
					});
				}
			});
		},
		// 扫描二维码
		async scan(model = 'pad') {
			// #ifdef APP
			let status = await this.checkPermission();
			if (status !== 1) {
				return;
			}
			// #endif
			let that = this;
			uni.scanCode({
				scanType: ['qrCode', 'barCode'],
				onlyFromCamera: true,
				success: (res) => {
					// console.log("res: " + JSON.stringify(res));
					that.form.logisticsNo = res.result;
				},
				fail: (err) => {
					// #ifdef MP
					uni.getSetting({
						success: (res) => {
							let authStatus = res.authSetting['scope.camera'];
							if (!authStatus) {
								uni.showModal({
									title: this.$t('order.logisticsform.7xv7v0'),
									content: this.$t('order.logisticsform.180su6'),
									success: (res) => {
										if (res.confirm) {
											uni.openSetting();
										}
									}
								});
							}
						}
					});
					// #endif
				}
			});
		},
		// #ifdef APP
		// app检查请求相机权限
		async checkPermission(code) {
			let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');

			if (status === null || status === 1) {
				status = 1;
			} else {
				uni.showModal({
					content: this.$t('order.list.xr3974'),
					confirmText: this.$t('order.list.ei61mf'),
					success: (res) => {
						if (res.confirm) {
							permision.gotoAppSetting();
						}
					}
				});
			}
			return status;
		}
		// #endif
	}
};
</script>

<style>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}

.cu-form-group input {
	/* color: #b2b7cd; */
	font-size: 28rpx;
}

.cu-form-group textarea {
	/* color: #b2b7cd; */
	font-size: 28rpx;
}

.cu-form-group picker {
	color: #b2b7cd;
	font-size: 28rpx;
}
</style>
